<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熙康体检系统 - 专业健康管理平台</title>
    <!-- 引入Element Plus的样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
    <!-- 引入Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- 引入Element Plus -->
    <script src="//unpkg.com/element-plus"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(120deg, #3498db, #8e44ad);
            height: 100vh;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .login-card {
            width: 400px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            backdrop-filter: blur(10px);
        }

        .login-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 24px;
            font-weight: 600;
        }

        .login-form {
            margin-top: 20px;
        }

        .captcha-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-canvas {
            width: 120px;
            height: 40px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            background: #f5f7fa;
        }

        .login-button {
            width: 100%;
            margin-top: 20px;
            height: 40px;
            font-size: 16px;
        }

        .extra-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            font-size: 14px;
        }

        .remember-me {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .forgot-password {
            color: #409EFF;
            text-decoration: none;
        }

        .forgot-password:hover {
            color: #66b1ff;
        }

        .register-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #606266;
        }

        .register-link a {
            color: #409EFF;
            text-decoration: none;
        }

        .register-link a:hover {
            color: #66b1ff;
        }

        .security-note {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: #909399;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <el-card class="login-card">
                <h2 class="login-title">熙康健康管理中心</h2>
                <el-form label-width="0px" class="login-form">
                    <el-form-item>
                        <input class="el-input__inner" placeholder="请输入用户名/手机号" style="width:100%;height:40px;padding:0 15px;border:1px solid #dcdfe6;border-radius:4px;font-size:16px;" />
                    </el-form-item>
                    <el-form-item>
                        <input type="password" class="el-input__inner" placeholder="请输入密码" style="width:100%;height:40px;padding:0 15px;border:1px solid #dcdfe6;border-radius:4px;font-size:16px;" />
                    </el-form-item>
                    <el-form-item>
                        <div class="captcha-container">
                            <input class="el-input__inner captcha-input" placeholder="请输入验证码" style="height:40px;padding:0 15px;border:1px solid #dcdfe6;border-radius:4px;font-size:16px;" />
                            <canvas id="captchaCanvas" class="captcha-canvas"></canvas>
                        </div>
                    </el-form-item>
                    <div class="extra-options">
                        <div class="remember-me">
                            <el-checkbox>记住密码</el-checkbox>
                        </div>
                        <a href="#" class="forgot-password">忘记密码?</a>
                    </div>
                    <el-button type="primary" class="login-button" id="loginBtn">登 录</el-button>
                    <div class="register-link">
                        还没有账号? <a href="#">立即注册</a>
                    </div>
                    <div class="security-note">
                        <i class="el-icon-lock"></i> 辽宁石油化工大学有限公司
                    </div>
                </el-form>
            </el-card>
        </div>
    </div>

    <script>
        const { createApp } = Vue
        const app = createApp({
            setup() {
                return {}
            }
        })
        app.use(ElementPlus)
        app.mount('#app')

        // 验证码生成
        function generateCaptcha() {
            const canvas = document.getElementById('captchaCanvas')
            const ctx = canvas.getContext('2d')
            canvas.width = 120
            canvas.height = 40

            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.fillStyle = '#f5f7fa'
            ctx.fillRect(0, 0, canvas.width, canvas.height)

            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
            for (let i = 0; i < 4; i++) {
                const char = chars.charAt(Math.floor(Math.random() * chars.length))
                ctx.font = '25px Arial'
                ctx.fillStyle = `rgb(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)})`
                ctx.fillText(char, 10 + i * 25 + Math.random() * 5, 25 + Math.random() * 10)
            }

            // 添加干扰线
            for (let i = 0; i < 5; i++) {
                ctx.strokeStyle = `rgba(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)}, 0.3)`
                ctx.beginPath()
                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
                ctx.stroke()
            }

            // 添加干扰点
            for (let i = 0; i < 20; i++) {
                ctx.fillStyle = `rgba(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 100)}, 0.3)`
                ctx.beginPath()
                ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI)
                ctx.fill()
            }
        }

        // 页面加载时生成验证码
        window.onload = function() {
            generateCaptcha()
            // 点击验证码图片时重新生成
            document.getElementById('captchaCanvas').onclick = generateCaptcha
        }

        document.getElementById('loginBtn').onclick = function() {
            window.location.href = 'wel.html';
        }
    </script>
</body>
</html>